<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="xiangqing.css">
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js"></script>
  <script src="./jquery/jquery-3.5.1.js"></script>
  <script src="purl.js"></script>
  <style>
    .a3{
      left:500px; 
      top: 10px;
      overflow: hidden;
      display: block;
      width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      
    }

  </style>
</head>


<body>
  <div id="box" class="clearfix">
    <div id="left">
      <h2 id="nav"></h2>
      <img src="" alt="" id="imgs">
      <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
          <li class="layui-this">热门作品</li>
          <li>所有专辑</li>
          <li>相关MV</li>
          <li>艺人介绍</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <ul class="lis">
              <!-- <li>
                          <span style="position: relative; top: 7px;left: 10px;">1</span>
                          <img src="play.png" alt="" style="width: 20px;height: 20px; margin-left:45px;">
                          <span style=" position: relative;top: 7px; left: 20px;">天外来物</span>
                         <span style="position: relative; left: 320px; top: 7px;" id="chang" class="active">04：17</span> 
                           <span class="imges" >
                            <a href=""> <img src="load.png" alt="" style="width: 20px; height: 20px; margin-left: 220px;"></a>
                            <a href=""><img src="xiang.png" alt="" style="width: 20px; height: 20px; margin-left: 10px;"></a>
                            <a href=""><img src="chang.png" alt="" style="width: 20px; height: 20px; margin-left: 10px;"></a>
                            <a href="">  <img src="xiang.png" alt="" style="width: 20px; height: 20px; margin-left: 10px;"></a>
                           </span>
                          <span style="position: relative; left:40px; top: 7px;">天外莱芜</span>
                        </li> -->
            </ul>
          </div>
          <div class="layui-tab-item" id="huimei">
            <!-- <div id="zhuanji">
                     <a href="" class="meili"></a>
                     <a href="" class="name"></a>
                     <p></p>
                  </div> -->
            <!-- <div id="pages">
                    <p>1</p>
                    <p>2</p>
                  </div> -->

          </div>
          <div class="layui-tab-item" id="mvs">
            <!-- <div class="mv" style="margin-left: 20px;">
                       <a href="" class="a1"></a>    
                       <a href="" class="a2"></a>  
                  </div>
                  <div class="mv"  style="margin-left: 20px;">
                    <a href="" class="a1"></a>    
                    <a href="" class="a2"></a>  
               </div> -->
          </div>
          <div class="layui-tab-item" id="four">
            <div>
              <p class="jianjie a5"> <span class="qianduan"></span> 简介</p>
              <p class="jian"></p>
            </div>
            <div>
              <p class="jianjie a6"></p>
              <p class="yue"></p>
            </div>
            <div>
              <p class="jianjie a7"></p>
              <p class="xinxi"></p>
            </div>
            <div>
              <p class="jianjie a8"></p>
              <p class="qingkuang"></p>
            </div>
            <div>
              <p class="jianjie a9"></p>
              <p class="jilu"></p>
            </div>
           

          </div>
        </div>
      </div>
    </div>
    <div id="right">
       <p class="huahua">热门歌手</p>
       <div class="artist">
         
    </div>
  </div>
  <script>
    // var lis=document.querySelectorAll(".lis li")
    // var imgs=document.getElementsByClassName("imges")[0]
    // var time=document.getElementById("chang")
    // lis.forEach(function(v,i,a){
    //   v.onmouseenter=function(){
    //      imgs.style.display="block"
    //      time.style.display="none"
    //   }
    //   v.onmouseleave=function(){
    //     imgs.style.display="none"
    //      time.style.display="block"
    //   }
    // })

  var ids=$.url().param("id")
  var name=$.url().param("name")
  var img=$.url().param("img")
     console.log(ids)
     var nav=document.getElementById("nav")
     nav.innerText=name
     var imgs=document.getElementById("imgs")
      imgs.src=img 
    var lis = document.getElementsByClassName("lis")[0]
    var huimei = document.getElementById("huimei")
    //封装一个请求函数
    function getArtists(a, callback) {
      var xhr = new XMLHttpRequest()
      var url = `https://autumnfish.cn/artist/top/song?id=${a}`
      xhr.open("GET", url)
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          callback(xhr.responseText)
        }
      }
    }

    getArtists(ids, function (res) {
      var data = JSON.parse(res)
      showUi(data)
    })
    function showUi(data) {
      var html = ""
      for (let i = 0; i < data.songs.length; i++) {
        var art = data.songs[i]
        html += `
         <li>
                          <span style="position: relative; top: 7px;left: 10px;">${i}</span>
                          <img src="play.png" alt="" style="width: 20px;height: 20px; margin-left:45px;">
                          <span style=" position: relative;top: 7px; left: 20px;">${art.name}</span>
                           <span class="imges">
                            <a href=""> <img src="load.png" alt="" style="width: 20px; height: 20px; margin-left: 280px; margin-top:-50px"></a>
                            <a href=""><img src="xiang.png" alt="" style="width: 20px; height: 20px; margin-left: 10px; margin-top:-50px"></a>
                            <a href=""><img src="chang.png" alt="" style="width: 20px; height: 20px; margin-left: 10px; margin-top:-50px"></a>
                            <a href="">  <img src="xiang.png" alt="" style="width: 20px; height: 20px; margin-left: 10px; margin-top:-50px"></a>
                           </span>
                          <span style="position: relative;width:"150px"" class="a3">${art.al.name}</span>
        </li>

         `
      }

      lis.innerHTML = html
    }

    function zhuanJi(a, callback) {
      var xhr = new XMLHttpRequest()
      var url = `https://autumnfish.cn/artist/album?id=${a}`
      xhr.open("GET", url)
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          callback(xhr.responseText)
        }
      }
    }

    zhuanJi(ids, function (res) {
      var data = JSON.parse(res)
      showZhuanJi(data)
    })
    var datas
    function showZhuanJi(data) {
      datas = data
      var html = ""
      for (let i = 0; i < 12; i++) {
        let art = data.hotAlbums[i]
        console.log(art)
        var times = art.publishTime
        var years = new Date(times)
        var year = years.getFullYear()
        var month = years.getMonth() + 1
        var day = years.getDate()
        html += `
         <div id="zhuanji" style="display:inline-block">
                   <a href="" class="meili"><img src="${art.blurPicUrl}" alt=""></a>
                     <a href="" class="name">${art.name}</a>
                     <p class="year">${year}.${month}.${day}</p>
          </div>

         `
      }
      html += `      <div id="pages">
                     <span class="pre">上一页</span>
                    <span class="first">1</span>
                    <span class="second">2</span>
                    <span  class="three">3</span>
                    <span class="next">下一页</span>
                  </div>`

      huimei.innerHTML = html
      // var first = document.getElementsByClassName("first")[0]
      // var two = document.getElementsByClassName("second")[0]
      // var threes = document.getElementsByClassName("three")[0]
      // var four= document.getElementsByClassName("four")[0]
      // console.log(threes)
      // two.onclick = function () {
      
      //   var html = ""
      //   for (let i = 12; i < 24; i++) {
      //     let art = data.hotAlbums[i]
      //     console.log(art)
      //     var times = art.publishTime
      //     var years = new Date(times)
      //     var year = years.getFullYear()
      //     var month = years.getMonth() + 1
      //     var day = years.getDate()
      //     html += `
      //    <div id="zhuanji" style="display:inline-block">
      //              <a href="" class="meili"><img src="${art.blurPicUrl}" alt=""></a>
      //                <a href="" class="name">${art.name}</a>
      //                <p class="year">${year}.${month}.${day}</p>
      //     </div>

      //    `
      //   }
      //   html += `      <div id="pages">
      //                <span class="pre">上一页</span>
      //               <span class="first">1</span>
      //               <span class="second">2</span>
      //               <span  class="three">3</span>
      //               <span class="next">下一页</span>
      //             </div>`

      //   huimei.innerHTML = html
      //   var first = document.getElementsByClassName("first")[0]
      // var two = document.getElementsByClassName("second")[0]
      // var threes = document.getElementsByClassName("three")[0]
      // var four= document.getElementsByClassName("four")[0]
      // }
      // threes.onclick=function(){
      //   console.log("55555555555555")
      //   var html = ""
      //   for (let i = 24; i < 30; i++) {
      //     let art = data.hotAlbums[i]
      //     console.log(art)
      //     var times = art.publishTime
      //     var years = new Date(times)
      //     var year = years.getFullYear()
      //     var month = years.getMonth() + 1
      //     var day = years.getDate()
      //     html += `
      //    <div id="zhuanji" style="display:inline-block">
      //              <a href="" class="meili"><img src="${art.blurPicUrl}" alt=""></a>
      //                <a href="" class="name">${art.name}</a>
      //                <p class="year">${year}.${month}.${day}</p>
      //     </div>

      //    `
      //   }
      //   html += `      <div id="pages">
      //                <span class="pre">上一页</span>
      //               <span class="first">1</span>
      //               <span class="second">2</span>
      //               <span  class="three">3</span>
      //               <span class="next">下一页</span>
      //             </div>`

      //   huimei.innerHTML = html
      //   var first = document.getElementsByClassName("first")[0]
      // var two = document.getElementsByClassName("second")[0]
      // var threes = document.getElementsByClassName("three")[0]
      // var four= document.getElementsByClassName("four")[0]
      // }
    }

    function gesMv(ind, callback) {
      var xhr = new XMLHttpRequest()
      var url = `https://autumnfish.cn/artist/mv?id=${ind}`
      xhr.open("GET", url)
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          callback(xhr.responseText)
        }
      }
    }
    gesMv(ids, function (res) {
      var data = JSON.parse(res)
      console.log(data)
      halouMv(data)
    })
    var mvs = document.getElementById("mvs")
    function halouMv(data) {
      var html = ""
      for (let i = 0; i < data.mvs.length; i++) {
        var art = data.mvs[i]
        html += `
         <div class="mv" style="margin-left: 20px;  margin-top:50px">
            <a href="" class="a1"> <img src="${art.imgurl}" alt="" style="width:100px;height:103px;margin-left:0px;margin-top:0px"></a>    
           <a href="" class="a2">${art.name}</a>  
          </div>
         `
      }

      mvs.innerHTML = html
    }
  var qianduan=document.getElementsByClassName("qianduan")[0]
  var jian=document.getElementsByClassName("jian")[0]
  var yue=document.getElementsByClassName("yue")[0]
  var xinxi=document.getElementsByClassName("xinxi")[0]
  var qingkuang=document.getElementsByClassName("qingkuang")[0]
  var jilu=document.getElementsByClassName("jilu")[0]
  var a5=document.getElementsByClassName("a5")[0]
  var a6=document.getElementsByClassName("a6")[0]
  var a7=document.getElementsByClassName("a7")[0]
  var a8=document.getElementsByClassName("a8")[0]
  var a9=document.getElementsByClassName("a9")[0]
  console.log(yue)
  function navHu(b,callback){
      var xhr=new XMLHttpRequest()
      xhr.open("GET", `https://autumnfish.cn/artist/desc?id=${b}`)
      xhr.send()
      xhr.onreadystatechange=function(){
        if(xhr.readyState===4&&xhr.status===200){
          callback(xhr.responseText)
        }
      }
  }
  navHu(ids,function(res){
    var data=JSON.parse(res)
    console.log(data)
    // qianduan.innerHTML=data.innerText
    a6.innerHTML=data.introduction[0].ti
    a7.innerHTML=data.introduction[1].ti
    a8.innerText=data.introduction[2].ti
    jian.innerHTML=data.briefDesc
    yue.innerHTML=data.introduction[0].txt
    xinxi.innerText=data.introduction[1].txt
    qingkuang.innerText=data.introduction[2].txt
  })
  
  var hotArtists=document.getElementsByClassName("artist ")[0]
  function getHotArtists(a, callback) {
      var xhr = new XMLHttpRequest()
      var url = `https://autumnfish.cn/top/artists?offset=0&limit=6`
      xhr.open("GET", url)
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          callback(xhr.responseText)
        }
      }
    }

    getHotArtists(ids, function (res) {
      var data = JSON.parse(res)
      console.log(data)
      showArtists(data)
    })
    function showArtists(data) {
      var html = ""
      for (let i = 0; i < data.artists.length; i++) {
        var art = data.artists[i]
        html += `
             <div class="xue">
             <img src="${art.picUrl}" alt="">
             <p>${art.name}</p>
             </div>

         `
      }

      hotArtists.innerHTML = html
    }


    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
      var element = layui.element;

      //…
    });
  </script>
</body>

</html>